<template>
	<div class="type"  @mouseleave.passive="leave">
		<el-header>
			<el-row justify="space-between">
				<el-col :span="8">忘忧书店管理系统</el-col>
				<!-- <el-col :span="10"></el-col> -->
				<el-col :span="6" >
					<el-avatar shape="circle" :size="30" :src="circleUrl"></el-avatar>
					<span>管理员</span>
					<label @click="reomveState()">退出</label>
				</el-col>
			</el-row>
		</el-header>
		<el-container>
			<el-aside width="200px">
				<el-menu 
				 background-color="#ffffff"
				  text-color="#0b0b0b" 
				  select="close"
				  :router="true"
				  >
					<el-menu-item   index="/admin/type" >
						<span><el-icon><chicken /></el-icon>类型92版</span>
					</el-menu-item>
					<el-menu-item   index="/admin/type93" >
						<span><el-icon><cherry /></el-icon>类型93版</span>
					</el-menu-item>
					<el-menu-item   index="/admin/books" >
						<span><el-icon><coin /></el-icon>商品管理</span>
					</el-menu-item>
					<el-menu-item   index="/admin/banner" >
						<span><el-icon><compass /></el-icon>热度图片</span>
					</el-menu-item>
					<el-menu-item   index="/admin/orders" >
						<span><el-icon><shopping-cart-full /></el-icon>订单发货</span>
					</el-menu-item>
					<el-menu-item   index="/admin/list" >
						<span><el-icon><avatar /></el-icon>用户列表</span>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-main>
				<div class="list">
					<router-view></router-view>
				</div>
			</el-main>
		</el-container>
		
	</div>
</template>


<script>
	import {mapMutations} from 'vuex'
	import {Chicken,Coin,Compass,ShoppingCartFull,Avatar,Cherry} from '@element-plus/icons-vue'
	export default{
		name:'Admin',
		data(){
			return{
				index:'',
				circleUrl:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
			}
		},
		components:{
			Chicken,
			Coin,
			Compass,
			ShoppingCartFull,
			Avatar,
			Cherry
		},
		methods:{
			reomveState(){
				this.removeobj()
				this.$router.go(0)
			},
			...mapMutations(['removeobj'])
		},
	}
</script>

<style scoped>
	.el-main{
		padding: 10px;
	}
	.el-menu-item{
		font-size: 12px;
	}
	.el-header
	{
	  background-color: #545c64;
	  text-align: center;
	  overflow: hidden;
	  line-height: 60px;
	}
	.el-col-8{
		color: white;
		font-size: 15px;
		text-align: left;
	}
	:deep(.is-justify-space-between){
		align-content: center;
	}
	.el-col-6{
		color: white;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 12px;
	}
	.el-col-6 label{
		cursor: pointer;
		color: #bc8f8f;
	}
</style>
